<script setup>
// import MyComputed from '../components/MyComputed.vue'
// import MyComputed2 from '@/components/MyComputed2.vue'
// import MyWatch from '@/components/MyWatch.vue'  
// import WatchEffect from '@/components/WatchEffect.vue'  
// import MyWatch2 from '@/components/MyWatch2.vue'   //局部注册
// import MySon from '@/components/MySon.vue' 
// import abc from '../assets/favicon.ico'
import componenright from '../components/componenright.vue'
import componentLeft from '../components/componentLeft.vue'


import { ref, shallowRef} from 'vue'


// let obj =ref({
// num:1,
// name:'jack'
// })
const color =ref('red')
const count =ref(0)
const view= shallowRef(componenright)
function clickCallback() {
  if (count.value %2 ==1) {
    view.value= componenright
  }else{
    view.value= componentLeft

  }
  count.value++
}
</script>

<template>
  <!-- <h5 class="title">深度选择器</h5> -->
        <!-- <p id="myP">HomeView</p> -->

  <!-- <main> -->
    <!-- <MyComputed /> -->
    <!-- <MyComputed2></MyComputed2> -->
<!-- <MyWatch></MyWatch> -->
<!-- <WatchEffect></WatchEffect> -->
<!-- <MyWatch2></MyWatch2>
 <Filter></Filter> -->
  <!-- </main> -->
  <!-- 动态绑定 -->
  <!-- <MySon :obj="obj"/> -->
<!-- <img :src="abc"/> -->
  <!-- <p  v-color="color">abcd</p> -->
  <!-- <img src="../assets/favicon.ico" alt=""> -->
<button @click="clickCallback">切换</button>

<transition name="fade" mode="out-in">
<component :is="view"></component>
</transition>
</template>

<style  scoped>
/* #myP{border: solid 5px red;}
:deep(.title){
  border: solid 5px green;
} */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>